
<template>
    <div  class="flw-node-single">
        <Panel :class="panelClass + '' + statusClass" :data="nodeData" :readonly="readonly"  :backgroundImage="backgroundImage">
            <template v-slot:body="{nodeData}">
                <slot name="body" :data="nodeData">
                </slot>
            </template>
        </Panel>
        <Line :nodeId="nodeData.nodeId" :readonly="readonly"></Line>
    </div>
</template>

<script setup>
import Panel from './panel.vue'
import Line from  './line.vue'
import {defineProps, toRefs, watch, ref} from  'vue'
    const props =  defineProps({
        nodeData:{},
        bodyClass:{
            type: String,
            default: ''
        },
        panelClass:{
             type: String,
            default: ''
        },
        readonly: {
            type: Boolean,
            default: false
        },
        backgroundImage: {
            type:String,
            default: 'linear-gradient(to right, #67B26F 0%, #4ca2cd  51%, #67B26F  100%)' 
        }
    })
    const statusClass = ref("");

    const { nodeData } = toRefs(props);

    watch(()=>nodeData,(newv,oldv)=>{
        const data = newv.value;
        if(data.nodeStatus && data.nodeStatus.includes(2)){
            statusClass.value = "flow-status-completed";
        }
    },{immediate:true, deep:true})
</script>

<style  scoped>
    .flow-warn {
        border: 2px solid #f25643;
    }
    .flow-status-completed{
        border: 2px solid #67B26F;
    }
    .flw-node-single{
        padding-left: var(--golbal-flow-node-padding);
        padding-right: var(--golbal-flow-node-padding);
        z-index: 1;
    }
    
   
    .flw-node-left-top{
        position: absolute;
        width: 50%;
        height: 1px;
    }
</style>